<template>
    <div @click="feeShow = false" class="maxPaymentBox" v-if="feeShow">
        <div @click.stop class="paymentBox box" style="position: relative;">
            <img alt src="@/assets/image/das.png" srcset style="width: 120px;position: absolute;top: -50px;right: 0;" />
            <div class="sizeCenter" style="position: relative;">
                <div v-if="visible">
                    <div class="colorFF1C6D size24 sizeW">打赏楼主</div>
                    <div class="reward" style="position: relative;padding-left: 30px;">
                        <img alt src="@/assets/gift/jb.png" srcset style="width: 25px;position: absolute;z-index: 99;top: 7px;left: 5px;" />
                        <input :placeholder="'请输入打赏'+$store.state.config.coin_name+'数量'" style="border: none;width: 90%;height: 37px;outline: none;" type="number" v-model="form.fee" />
                    </div>

                    <input placeholder="留言鼓励一下楼主吧" style="border: none;width: 90%;height: 37px;outline: none;text-align: center;background-color: rgba(0, 0, 0, 0);" v-model="form.message" />

                    <div class="marginTop30 marginBottom30">
                        <el-button @click.stop="nextFun" class="colorFF1C6D colorFFF" round style="background-color:#FF1C6D;color:#FFF;width: 150px;">立即打赏</el-button>
                    </div>
                </div>

                <div v-else>
                    <i class="el-icon-back hand" style="position: absolute;left: 20px;top: -40px;font-size: 22px;" @click="backFun"></i>
                    <div @click.stop="focus" class="marginTop50" id="payPwd" style="width: 100%; margin: 50px auto;">
                       
                        <div class="font-16 color333" style>请输入支付密码</div>
                        <div class="marginTop30"></div>
                        <el-input :autofocus="autofocus" id="myInput" maxlength="6" placeholder="请输入内容" ref="pwd" style="opacity: 0;position: absolute;" v-model="msg"></el-input>
                        <ul class="pwd-wrap" style="margin-left: 0;">
                            <li :class="{ selectBox: msgLength > 0 }" :style="msg.length == 0 ? 'border: #FF1C6D 1px solid' : ''">
                                <i v-if="msgLength > 0"></i>
                            </li>
                            <li :style="msg.length == 1 ? 'border: #FF1C6D 1px solid' : ''">
                                <i v-if="msgLength > 1"></i>
                            </li>
                            <li :style="msg.length == 2 ? 'border: #FF1C6D 1px solid' : ''">
                                <i v-if="msgLength > 2"></i>
                            </li>
                            <li :style="msg.length == 3 ? 'border: #FF1C6D 1px solid' : ''">
                                <i v-if="msgLength > 3"></i>
                            </li>
                            <li :style="msg.length == 4 ? 'border: #FF1C6D 1px solid' : ''">
                                <i v-if="msgLength > 4"></i>
                            </li>
                            <li :style="msg.length == 5 ? 'border: #FF1C6D 1px solid' : ''">
                                <i v-if="msgLength > 5"></i>
                            </li>
                        </ul>
                    </div>
                    <div class="marginTop70">
                        <el-button :loading="submitComplete" @click.stop="paymentFun" class size="big" style="width: 300px;background-color: #FF1C6D;border: none;" type="primary">立即支付</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        creation_id: {
            type: [String, Number],
        },
    },
    data() {
        return {
            form: {
                creation_id: '',
                fee: '',
                fun_password: '',
                message: '',
            },
            submitComplete: false,
            visible: true,
            msg: '',
            msgLength: 0,
            autofocus: true,
            feeShow: false,
        }
    },
    watch: {
        msg(curVal) {
            if (/[^\d]/g.test(curVal)) {
                this.msg = this.msg.replace(/[^\d]/g, '')
            } else {
                this.msgLength = curVal.length
            }
        },

        visible() {
            setTimeout(() => {
                this.$refs.pwd.focus()
            }, 500)
        },
    },
    methods: {
        initForm() {
            this.form = {
                creation_id: '',
                fee: '',
                fun_password: '',
                message: '',
            }
        },
        backFun(){
            this.visible = true
            this.msg = ''
            this.msgLength = 0
        },
        previewFun(res) {
            this.$emit('previewFun', res)
        },
        focus() {
            this.$refs.pwd.focus()
        },
        nextFun() {
            if (!this.form.fee) {
                this.$message({
                    message: '请输入打赏金额',
                    type: 'warning',
                    customClass: 'super-message',
                })
                return
            }
            this.visible = false
        },
        paymentFun() {
            this.form.fun_password = this.msg
            this.form.creation_id = this.creation_id
            console.log('form', this.form)
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            this.$request
                .post('/creation-tipping/create', this.form)
                .then((res) => {
                    this.submitComplete = false
                    this.feeShow = false
                    this.visible = true
                    this.$message({
                        message: '打赏成功',
                        type: 'success',
                        customClass: 'super-message',
                    })
                    this.msg = ''
                    this.initForm()
                })
                .catch((error) => {
                    this.submitComplete = false
                    this.msg = ''
                    this.fun_password = ''
                    this.$refs.pwd.focus()
                    this.visible = true
                })
        },
    },
}
</script>

<style lang="scss" scoped>
#payPwd .pwd-wrap {
    width: 400px;
    height: 60px;
    padding-bottom: 1px;
    margin: 0 auto;

    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    cursor: pointer;
}

.pwd-wrap li {
    list-style-type: none;
    text-align: center;
    line-height: 60px;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    border: 1px solid #ddd;
    width: 50px !important;
    margin-right: 3px;
    background-color: #fff;
}

.pwd-wrap li i {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #525252;
    display: inline-block;
}

.reward {
    width: 70%;
    height: 40px;
    background-color: #fff;
    border-radius: 50px;
    margin: 30px auto;
}
</style>